<template>
  <div class="news ">
    <div class="news-width new-bg">
      <div class="news-content" style="width: 1200px;height: 100%">
        <div style="width: 686px;height: 500px">
          <el-carousel @change="handleOff" height="500px" :interval="5000">
            <el-carousel-item v-for="item in imgList" :key="item.id" style="cursor:pointer;background: #f3f3f3">
              <img :src="item.filePath" style="width: 100%;height: 100%;object-fit: cover;" alt=""
                   @click="handleNews(item)"/>
              {{ item.name }}
              <div class="img-name"
                   style="position: absolute;bottom: 0;height: 32px;line-height: 32px;z-index: 999;padding-left: 12px;background: #000;opacity: 0.3;color: #fff;width: 100%">
                {{
                  item.name.length > 30 ? item.name.substr(0, 30) + '······' : item.name
                }}
              </div>
            </el-carousel-item>

          </el-carousel>
        </div>
        <div style="flex: 1;padding-left: 12px">
          <div class="title">
            要闻
            <More @click.native="handleMore"/>
          </div>
          <!--        <div style="height: 402px;background: #F3F9FF;padding: 0 12px;overflow: auto">-->
          <!--          <div class="new-list" v-for="item in newsList" :key="item.id">-->
          <!--            <div class="new-list-time" @click="handleNews(item)">-->
          <!--              <div class="new-list-time-day">{{ getDay(item.createDate) }}</div>-->
          <!--              <div class="new-list-time-month">{{ getYear(item.createDate) }}</div>-->
          <!--            </div>-->
          <!--            <div :class=" item.topFlag ? 'new-list-content-top' : 'new-list-content'" @click="handleNews(item)">-->
          <!--              {{ item.name }}-->
          <!--            </div>-->
          <!--          </div>-->
          <!--        </div>-->

          <div style="height: 470px;padding: 0 12px;overflow: auto">
            <div style="padding-top: 8px">
              <div class="list-news" v-for="res in newsList" :key="res.id" @click="handleNews(res)">
                <div style="display: flex;align-items: center;">
                  <div class="list-mark"></div>
                  <div :class="res.topFlag ? 'list-title-news-top list-title-news' : 'list-title-news'">{{ res.name }}</div>
                </div>
                <div style="width: 80px">
                  {{ dayjs(res.createDate).format('YYYY-MM-DD') }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
// import './layout.css'

import More from "@/components/More.vue";
import dayjs from "dayjs";

export default {
  props: ['ywList'],
  components: {More},
  data() {
    return {
      newsList: [],
      news: [],
      imgList: [],
      code: "",
      moduleId: ""
    }
  },
  watch: {
    ywList(data) {
      this.code = data.code
      this.moduleId = data.id
      data.articleList.forEach(item => {
        if (item.showLeft) {
          this.imgList.push(item)
        }
      })
      this.news = data[0]
      this.newsList = data.articleList
      // this.newsList = this.newsList
      // this.imgList = data[0].articleList?.slice(6, 10)
    }
  },
  methods: {
    dayjs,
    handleOff() {

    },
    handleMore() {
      const {href} = this.$router.resolve({
        path: `/more`,
        query: {
          id: this.moduleId,
          code: this.code
        }
      });
      window.open(href, '_blank');
    },
    getYear(value) {
      const a = value.split(' ')
      const b = a[0].split('-')
      return `${ b[0] }.${ b[1] }`
    },
    getDay(value) {
      const a = value.split(' ')
      const b = a[0].split('-')
      return b[2]
    },
    handleNews(row) {
      if (row.outHref) {
        window.open(row.outHref)
      } else {
        if (row.id) {
          const {href} = this.$router.resolve({
            path: `/news`,
            query: {
              id: row.id,
              type: row.bizType
            }
          });
          window.open(href, '_blank');
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
.news {
  //width: 100%;
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.new-bg {
  //background: url('~@/assets/img/1.png') no-repeat center;
  background-image: url('~@/assets/img/1.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
}

.news-content {
  //width: 1200px;
  //background: #102F7A;
  display: flex;
  //justify-content: center;
}

@media screen and (min-width: 1300px) {
  .news-width {
    width: 1200px;
  }
}

@media screen and (min-width: 1800px) {
  .news-width {
    width: 1400px;
  }
}

@media screen and (min-width: 2000px) {
  .news-width {
    width: 1920px;
  }
}

.new-list {
  height: 77px;
  border-bottom: #237CBE 1px dashed;
  //padding-right: 12px;
  display: flex;
  align-items: center;
}

.new-list:last-child {
  border-bottom: 0;
}


.new-list-time {
  text-align: center;
  margin-right: 10px;
  cursor: pointer;
}

.new-list-time-day {
  color: #237CBE;
  font-size: 28px;
  font-weight: 600;
}

.new-list-time-month {
  color: #000;
  font-size: 14px;
  font-weight: 400;
}

.new-list-content {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  display: -webkit-box; /*  display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  */
  -webkit-box-orient: vertical; /*  -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式  */
  -webkit-line-clamp: 2; /*  -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */
  overflow: hidden;
  cursor: pointer;
}

.list-title-news-top {
  font-weight: 600;
}

.new-list-content-top {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  display: -webkit-box; /*  display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  */
  -webkit-box-orient: vertical; /*  -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式  */
  -webkit-line-clamp: 2; /*  -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */
  overflow: hidden;
  cursor: pointer;
}

.title {
  height: 32px;
  line-height: 32px;
  border-left: 8px solid #237CBE;
  padding-left: 12px;
  color: #237CBE;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  //background: #fff;
}

.img-name {
  display: -webkit-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  box-sizing: border-box;
}

/deep/ .el-carousel__indicators {
  display: none;
}

.list-news {
  font-size: 15px;
  color: #444;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  //border-bottom: #102F7A 1px dashed;
}

.list-mark {
  width: 5px;
  height: 5px;
  background: #60A3D7;
  margin-right: 10px;
}

.list-title-news {
  color: #333;
  cursor: pointer;
  overflow: hidden; /* 隐藏超出部分的文本 */
  text-overflow: ellipsis; /* 在文本溢出时显示省略号 */
  white-space: nowrap; /* 防止换行 */
  width: 380px;
}


</style>
